<template>
  <div class="view-wrapper">
    <div class="main">
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <el-tab-pane label="总余额明细" name="first" :lazy="true">
          <balance-details />
        </el-tab-pane>
        <el-tab-pane label="订单交易记录" name="second" :lazy="true">
          <transaction-record />
        </el-tab-pane>
        <el-tab-pane :label="withdrawListCount" name="third" :lazy="true">
          <withdrawal-record @success="getwithdrawListCount" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
  import {
    withdrawListCount
  } from "@/api/operateActive";
  import balanceDetails from "./components/balanceDetails";
  import transactionRecord from "./components/transactionRecord";
  import withdrawalRecord from "./components/withdrawalRecord";
  export default {
    components: {
      balanceDetails,
      transactionRecord,
      withdrawalRecord,
    },
    mounted() {
      this.getwithdrawListCount();
    },
    data() {
      return {
        activeName: "first",
        withdrawListCount: '0',
      };
    },
    methods: {
      tabClick(e){
        console.log(e.index)
        if(e.index==2){
          this.getwithdrawListCount()
        }
      },
      getwithdrawListCount() { //查询提现申请数量 (待结算)
        var params = {}
        withdrawListCount(params).then((res) => {
           this.withdrawListCount = '提现申请' + '（' + res.result + '）'
          })
          .finally(() => {
            
          })
      },
    },
  };

</script>
<style lang="scss" scoped>
  .main {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px;
  }

</style>
